import React, {useEffect, useState,useRef} from 'react';
import {PageHeader, Steps,Input,Select,Button,Form,message} from "antd";
import style from './News.module.css'
import axios from "axios";
import NewsEditor from "../../../components/news-manage/NewsEditor";
import {useNavigate} from "react-router-dom";

const { Step } = Steps
const { Option } = Select

const layout = {
    labelCol: { span: 2 },
    wrapperCol: { span: 22 },
}

const NewsAdd = () => {
    const [current,setCurrent] = useState(0)
    const [categoryList,setCategoryList] = useState([])
    const [formInfo,setFormInfo]=useState({})
    const [content,setContent]=useState('')
    const NewsForm = useRef(null)
    const navigate=useNavigate()
    const {region,username,roleId} = JSON.parse(localStorage.getItem('token'))

    useEffect(()=>{
        axios.get('/categories').then(res=>{
            setCategoryList(res.data)
        })
    },[])

    const nextStep = () =>{
        if(current===0){
            NewsForm.current.validateFields().then(res=>{
                setFormInfo(res)
                setCurrent(current+1)
            }).catch(error=>{
                console.log(error);
            })
        }else{
            if(content==='' || content.trim()==='<p></p>'){
                message.error('内容不能为空')
            }else {
                setCurrent(current+1)
            }
        }
    }
    const previousStep = () =>{
        return setCurrent(current-1)
    }

    const handleSave=(auditState)=>{
        axios.post('/news',{
            ...formInfo,
            "content": content,
            "region": region?region:'全球',
            "author": username,
            "roleId": roleId,
            "auditState": auditState,
            "publishState": 0,
            "createTime": Date.now(),
            "star": 0,
            "view": 0,
            "publishTime": 0
        }).then(res=>{
            navigate(auditState===0?'/news-manage/draft':'/audit-manage/list')
        })
    }



    return (
        <div>
            <PageHeader
                title="撰写新闻"
            />
            <Steps current={current}>
                <Step title="基本信息" description="新闻标题，新闻分类" />
                <Step title="新闻内容" description="新闻主题内容" />
                <Step title="新闻提交" description="保存草稿或者提交审核" />
            </Steps>
            <div style={{margin:'40px 20px'}}>
                <div className={current===0?'':style.active}>
                    <Form {...layout}  ref={NewsForm}>
                        <Form.Item name="title" label="新闻标题" rules={[{ required: true }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item name="categoryId" label="新闻分类" rules={[{ required: true }]}>
                            <Select
                                placeholder="Select a option and change input text above"
                                allowClear
                            >
                                {
                                    categoryList.map(item=>{
                                        return <Option value={item.id} key={item.id}>{item.value}</Option>
                                    })
                                }
                            </Select>
                        </Form.Item>
                    </Form>
                </div>
                <div className={current===1?'':style.active}>
                    <NewsEditor getContent={(value)=>{
                        setContent(value);
                    }}></NewsEditor>
                </div>
            </div>
            <div style={{marginTop:'20px'}}>
                {
                    current===2&&<span>
                        <Button type="primary" onClick={()=>handleSave(0)}>保存草稿箱</Button>
                        <Button danger onClick={()=>handleSave(1)} style={{margin:'0 5px'}}>提交审核</Button>
                    </span>
                }
                {
                    current<2&&<Button type="primary" onClick={nextStep} style={{margin:'0 5px'}}>下一步</Button>
                }
                {
                    current>0&&<Button type="primary" onClick={previousStep}>上一步</Button>
                }
            </div>
        </div>
    );
};

export default NewsAdd;